<template>
    <div>
        <div>
            <mt-header title="账号安全" style="background: linear-gradient(#000000, #035838);">
                <mt-button icon="back" slot="left" @click="goBack()">返回</mt-button>
            </mt-header>
        </div>
        <div>
            <mt-field label="原始手机号" placeholder="请输入手机号" v-model="telephoneNumber"></mt-field>
        </div>
        <div>
            <tr>
                <td>
                    <mt-field label="验证码" placeholder="请输入验证码" v-model="identifyingCode"></mt-field>
                </td>
                <td><input class="mint-button mint-button--default mint-button--small" type="button" id="btn35" value="获取验证码" @click="getIdentifyingCode()"></td>
            </tr>
        </div>
        <div class="promoters-button">
            <button class="mint-button mint-button--default mint-button--large is-plain" @click="updatePassword()">
                <label class="mint-button-text">下一步</label>
            </button>
        </div>

    </div>

</template>
<script>
import axios from "axios";
import { Indicator } from "mint-ui";
import { Toast } from "mint-ui";
import Reciprocal from "../../common/vue/Reciprocal";
export default {
  components: {
    comReciprocal: Reciprocal
  },
  data() {
    return {
      telephoneNumber: "",
      oldtelephoneNumber: "",
      identifyingCode: ""
    };
  },

  props: {},
  watch: {},
  mounted() {},
  created() {
    // 该方法用来更改tabbarshow的值 用来 展示、隐藏底部 tabbar (boolean为0 展示、boolean为1 隐藏)
    this.$store.dispatch("showTabbar", { boolean: "1" });
  },
  methods: {
    goBack() {
      this.$store.dispatch("showTabbar", { boolean: "0" });
      history.go(-1);
    },

    updatePassword() {
      let telephoneNumber = this.telephoneNumber;
      let identifyingCode = this.identifyingCode;
      let global_members_id = JSON.parse(
        localStorage.getItem("global_members_id")
      );
      axios({
        method: "post",
        url: "/api/updateysmm/ysmmbj.htm",
        params: {
          id: global_members_id,
          sjh: telephoneNumber,
          yzm: identifyingCode
        }
      }).then(res => {
        res = res.data;
        if (res.zt === "true") {
          this.$router.push({ path: "/accountsecuritynext" });
        } else {
          Indicator.close();
          let instance = Toast({
            message: "验证失败"
          });
          setTimeout(() => {
            instance.close();
          }, 2000);
        }
      });
    },
    // 获取验证码接口
    getIdentifyingCode() {
      let telephoneNumber = this.telephoneNumber;
      if (telephoneNumber === "" || telephoneNumber === null) {
        Indicator.close();
        let instance = Toast({
          message: "请输入手机号"
        });
        setTimeout(() => {
          instance.close();
        }, 2000);
      } else {
        if (telephoneNumber && /^1(3|4|5|7|8)\d{9}$/.test(telephoneNumber)) {
          axios({
            method: "post",
            url: "/api/phonecode/xgmm.htm",
            params: {
              register_telephonenumber: telephoneNumber
            }
          }).then(res => {
            res = res.data;
            if (res.zt === "true") {
              this.$options.methods.reciprocal();
              Indicator.close();
              let instance = Toast({
                message: "验证码已发送"
              });
              setTimeout(() => {
                instance.close();
              }, 2000);
            } else {
              Indicator.close();
              let instance = Toast({
                message: "请输入原始注册手机号"
              });
              setTimeout(() => {
                instance.close();
              }, 2000);
            }
          });
        } else {
          Indicator.close();
          let instance = Toast({
            message: "请输入正确的手机号"
          });
          setTimeout(() => {
            instance.close();
          }, 2000);
        }
      }
    },
    //获取验证码
    reciprocal() {
      var count = 60;
      var countdown = setInterval(CountDown, 1000);
      function CountDown() {
        $("#btn35").attr("disabled", true);
        $("#btn35").val("已发送" + count);
        if (count == 0) {
          $("#btn35")
            .val("获取验证码")
            .removeAttr("disabled");
          clearInterval(countdown);
        }
        count--;
      }
    }
  }
};
</script>
<style scoped>
.mint-cell-wrapper {
  background-image: none;
  background: red;
}
.promoters-button {
  height: 150px;
  width: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
}
</style>